<template>
  <div id="app">
    <div
      class="email"
      id="drag"
      @touchmove="move"
      @click="$router.push('/email')"
      v-if="flag"
    >
      <img src="@/assets/email/icon_person_mail.png" alt="" />
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag:true
    }
  },
  methods: {
    move(e) {
      e.preventDefault();
      var x = e.touches[0].clientX;
      var y = e.touches[0].clientY;

      if (
        x > 40 &&
        x < document.body.clientWidth - 40 &&
        y > 32 &&
        y < document.body.clientHeight - 40
      ) {
        var drag = document.getElementById("drag");
        drag.style.top = y - 32 + "px";
        drag.style.left = x - 40 + "px";
      }
    },
  },
  watch: {
    $route(n) {
      console.log(n.path);
      if (n.path == "/email") {
        this.flag = false;
      } else {
        this.flag = true;
      }
// n.path == "/custmoer" ? this.flag = false :this.flag = true;
    },
  },
};
</script>
<style lang="scss">
#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  overflow: auto;
}
.email {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(255, 208, 0);
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 50px;
  right: 0px;
  img {
    width: 60%;
    height: 50%;
  }
}
</style>
